<template>
    <PageTemplate>
    <div slot="content">
        <!-- <div class="brand">
            <breadcrumb :arrayName="brand" :hasIcon="hasIcon"></breadcrumb>
        </div> -->

        <div class="container">
            <el-row class="search">
                <div class="search-collapse">
					<!--普通搜索-->
					<el-input :placeholder="$t('dft.taskDes')"  v-model="keyword" class="search-box"   >
            <el-button slot="append" icon="el-icon-search" @click="commonSearch"></el-button>
          </el-input>
					<!-- <el-button size="small"  slot="append" icon="el-icon-search" @click="commonSearch" class="btn-default search-btn"  ></el-button> -->
                </div>  
                <!--折叠板-->
                <el-collapse class="search-collapse-content" @change="advanceSearch"  v-model="showCollapse" accordion>
                    <el-collapse-item>
                        <template slot="title" class="search-collapse-title" >
							<span class="vertical-bar"></span>&nbsp;&nbsp;
							<span class="title-font" >{{$t(advSearch)}}</span>
                        </template>
                        <!-- 高级搜索具体内容 -->
                        <el-row :gutter="10" class="row-search" >
                            <el-col :span="2">
                                <label class="label-search">{{$t('dft.startTime')}}</label>
                            </el-col>
                            <el-col :span="6">
                                <el-date-picker
                                        class=""
                                        v-model="launchTime"
                                        type="daterange"
                                        unlink-panels  
                                        value-format="yyyy-MM-dd"
                                        :range-separator="$t('ndt.to')"
                                        :start-placeholder="$t('ndt.begin_time')"
                                        :end-placeholder="$t('ndt.end_time')">
                                </el-date-picker>
                            </el-col>

                            <el-col :span="2">
                                <label class="label-search">{{$t('dft.taskDes')}}</label>
                            </el-col>
                            <el-col :span="6">
                                <el-input   class="input-small" v-model="folio"  ></el-input>
                            </el-col>
                        </el-row>

                        <!-- 查询和重置按钮-->
                        <el-row :gutter="10" class="row-search">
                            <div class="btn-group-search">
                                <el-col :span="2">&nbsp;</el-col>
                                <el-col :span="6">
                                    <el-button class="btn-default"  @click="advSearchs" size="small">{{$t('adt.query')}}</el-button>
                                    <el-button class="btn-second" @click="reset" style="margin:0;"  size="small" >{{$t('adt.reset')}}</el-button>
                                </el-col>
                            </div>
                        </el-row>

                    </el-collapse-item>    
                </el-collapse>
            </el-row>

            <div style="height:15px;background-color:#F1F1F1;"></div>
            
            <div>
                <el-row class="table-body">
                    <el-table :data="mydraftList"  border ref="mydraftList" >
						<!--序号-->
						<el-table-column  type="index" :label="$t('te.no')"  width="55"></el-table-column>
                        <el-table-column prop="folio" :label="$t('dft.taskDes')" width="200" show-overflow-tooltip  >
                            <template slot-scope="scope" >
                               {{scope.row.folio}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="processname" :label="$t('dft.procName')"></el-table-column>
                        <el-table-column prop="activityname" :label="$t('dft.procActName')"></el-table-column>
                        <el-table-column prop="processstarttime" :label="$t('dft.procStartTime')"></el-table-column>
                        <el-table-column :label="$t('dft.needDealer')" :formatter="showDealer"></el-table-column>
                        <el-table-column :label="$t('cm.operate')">
                            <template slot-scope="scope">
                                <el-button type="text"  size="small" @click="editDraft(scope.row)">{{$t('cm.update')}}</el-button>
								<el-button type="text"  size="small" @click="delDraft(scope.row)" >{{$t('cm.delete')}}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>    
                </el-row>

                <el-row class="table-bottom" >
                    <!--按钮-->
                    <div class="table-bottom-btn-group" >
                        <!--添加-->
                        <!-- <el-button class="btn-add btn1 "  size="small" @click="addDraft" >{{$t('te.add')}}</el-button> -->
                        <!--删除-->
                        <!-- <el-button type="danger" class="btn2"  @click="batchDel(tableData1)"  size="small" >{{$t('te.delete')}}</el-button> -->
                    </div>

                    <el-pagination ref="pager"
							@size-change="changeSize"
							@current-change="changeCurrentPage"
							@prev-click="prePage"
							@next-click="nextPage"
							:current-page="currentPage"  
							:page-sizes="[10, 20, 30, 40]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total">
					</el-pagination>


                </el-row>

            </div>

        </div>

    </div>
    </PageTemplate>
</template>

<script>
    import mydraft from './js/mydraft'
    export default mydraft
</script>


<style>
.btn-default{
	color: rgb(255, 255, 255) !important;
	background-color: rgb(0, 74, 134) !important;
}
.el-date-editor .el-range__icon {
  line-height: 40px !important;
}
</style>